<!--
 * @Author       : 邱狮杰
 * @Date         : 2021-09-01 09:45:07
 * @LastEditTime : 2021-09-07 18:18:29
 * @FilePath     : /newhope/src/page/luckDraw/index.vue
 * @Description  :  抽奖
-->

<script setup lang="ts">
import { ref } from "vue";
import { Mask, AmountOfMoney } from "/@/components/index";
import { getSrc, getPrizeID } from "/@/utils/prizeClassification";
import clickToDraw from "/@/assets/images/clickToDraw.png";
import gameInstructions from "/@/assets/images/gameInstructions.png"; // 奥特兰牛奶 10元优惠卷
import receive from "/@/assets/images/receive.png";
import winALottery from "/@/assets/images/winALottery.png";
import clickBack from "/@/assets/images/clickBack.png";
import { State } from "/@/store/user";

import shake from "/@/assets/images/shake.png"; // 摇一摇
import luckyDraw from "/@/assets/images/luckyDraw.png"; // 抽奖中
import { useHttp } from "/@/hooks/http";
import { useGo } from "/@/hooks/go";
import { useStore } from "vuex";
import Shake from "./components/shake.vue";
import Video from "./components/video.vue";
import Ten from "./components/tenYuan.vue";
import Other from "./components/other.vue";
const [go] = useGo();
const prizeNumber = ref(3); // 0 = 牛奶十元优惠卷 1 = 现金奖励
const showImage = ref("");
const loading = ref(false);
const store = useStore();
const m = ref('')
const other = ref("");
const id = ref(0);
const [send] = useHttp();
const startDraw = ref(true); // 准备抽奖 === 进入首页
const code = ref('')
interface httpResponse {
	data: {
		award: {
			id: string;
			title: string;
			type: string;
			pic: string;
		};
		value: string;
	};
	message: string;
	msg: string;
	success: number;
}
const httpResponseData = ref<null | httpResponse>(null);
async function clickToDrawHandler() {
	loading.value = true;
	// https://act.yoois.com/zt/qr2/api.php?i=3&logout=1&action=mainaward
	// 	data:
	// award: {id: "6", title: "新希望华西商城满减优惠券", type: "coupon", pic: "https://act.yoois.com/zt/qr2/img/coupon.png"}
	// value: "http://www.baidu.com"
	// [[Prototype]]: Object
	// message: "恭喜中奖了,正在跳转到领取链接"
	// msg: "恭喜中奖了,正在跳转到领取链接"
	// success: 1
	const result = await send<httpResponse>({
		params: {
			i: 3,
			logout: 1,
			action: "mainaward",
		},
	});
	if (result) {
		if (result.data.success === 0) {
			// 抽过奖了
			alert(result.data.message);
			go({ name: "index" });
			loading.value = false;
		}
		httpResponseData.value = result.data;
		code.value = result.data.data.value
	} else {
		alert("网络好像开了一点小差");
	}
	// startDraw.value = false
	// prizeNumber.value = 0
}

function clickBackHandler() {
	startDraw.value = true;
	loading.value = false;
	id.value = 0
	prizeNumber.value = 3;
}
async function shakes() {
	// 抽过奖了
	if (!loading.value) {
		return;
	}
	if (!httpResponseData.value) {
		alert("还在抽奖中！请稍后！");
		return;
	}
	await send<{
		data: {
			awards: State["prizeList"];
			fans: State["userInfo"];
			myawards: State["myawards"];
		};
	}>(
		{
			method: "GET",
			params: {
				i: 3,
				logout: 1,
				action: "index",
			},
		},
		(response) => {
			store.commit("user/initUserInfo", response.data.data.fans);
			store.commit("user/initPrizeList", response.data.data.awards);
			store.commit("user/initMyAwards", response.data.data.myawards);
		},
		() => {
			alert("网络开了一点小差");
		}
	);
	showImage.value = httpResponseData.value.data.award.pic;
	other.value = getSrc(httpResponseData.value.data.award.type);
	id.value = getPrizeID(httpResponseData.value.data.award.type);
	if (id.value === 5) {
		m.value = httpResponseData.value.data.value
	}
	loading.value = false;
	startDraw.value = true;
}

function onReceiveGet() {
	alert("领取成功");
	startDraw.value = true;
}
</script>
<template>
	<div class="luckDraw">
		<Mask :style="'z-index:100'" v-if="!startDraw" />
		<!-- <Mask :style="'z-index:100'" /> -->
		<img
			@click="clickToDrawHandler"
			v-if="startDraw"
			:src="clickToDraw"
			alt="button"
			class="pulsate-bck"
		/>
		<Ten v-if="id === 6" />
		<Video v-if="id === 4" :code="code" />
		<Shake v-if="loading" @on-shake-click="shakes" />
		<Other v-if="id === 1" :src="other" />
		<Other v-if="id === 2" :src="other" />
		<Other v-if="id === 3" :src="other" />
		<Mask :style="'z-index:100'" v-if="id === 5" />
		<!-- <img v-if="showImage" :src="showImage" alt="10" class="winThePrize" /> -->
		<AmountOfMoney v-if="id === 5" :code="m" />
		<!-- <img v-if="id === 5" :src="winALottery" alt="现金奖励" class="cashRedEnvelope" /> -->
		<img v-if="id === 5" :src="clickBack" alt="点击返回" class="doawButton" @click="clickBackHandler" />
	</div>
</template>

<style lang="scss" scoped>
.pulsate-bck {
	-webkit-animation: pulsate-bck 1s ease-in-out infinite both;
	animation: pulsate-bck 1s ease-in-out infinite both;
}
@-webkit-keyframes pulsate-bck {
	0% {
		-webkit-transform: translateX(-50%) scale(1);
		transform: translateX(-50%) scale(1);
	}
	50% {
		-webkit-transform: translateX(-50%) scale(0.97);
		transform: translateX(-50%) scale(0.97);
	}
	100% {
		-webkit-transform: translateX(-50%) scale(1);
		transform: translateX(-50%) scale(1);
	}
}
@keyframes pulsate-bck {
	0% {
		-webkit-transform: translateX(-50%) scale(1);
		transform: translateX(-50%) scale(1);
	}
	50% {
		-webkit-transform: translateX(-50%) scale(0.97);
		transform: translateX(-50%) scale(0.97);
	}
	100% {
		-webkit-transform: translateX(-50%) scale(1);
		transform: translateX(-50%) scale(1);
	}
}
.luckDraw {
	position: relative;
	height: 100%;
	width: 100%;
	background: url("../../assets/images/bkg/lottery.jpg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	img {
		position: absolute;
		left: 50%;
		bottom: 102px;
		transform: translateX(-50%);
		width: 152px;
		height: 36px;
	}
	.winThePrize {
		position: absolute;
		top: 146px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 101;
		width: 317px;
		height: 395px;
	}
	.doawButton {
		width: 152px;
		height: 36px;
		position: absolute;
		// bottom: 102px;
		top: 622px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 101;
	}
	.cashRedEnvelope {
		position: absolute;
		top: 50px;
		left: 50%;
		transform: translateX(-50%);
		width: 317px;
		height: 562px;
		z-index: 101;
	}
}
</style>
